<template>
  <div class="myCity">
    <div class="city-box">
      <div class="city">
        <div class="city-img">
          <img src="@/assets/images/exhibition.jpg" alt="">
        </div>
      </div>
      <div class="city-content">
        <span class="city-title">欢迎{{ infoName }}!</span>
        <span class="city-tips">物业推送消息</span>
        <span class="city-text">让您随时掌握您的物业信息</span>
      </div>
      <div class="city-button">
        <span class="city-content" @click='again' v-if="marktext">选择您所在的城市</span>
        <span class="city-content" @click='again' v-if="!marktext">{{ address }}</span>
        <div class="next-box">
          <div v-if="marknext" @click="tomyResidential" style="margin-top: .3rem;">
            <span class="next-box-content city-content-img">选择您的小区&nbsp;&nbsp;<img src="@/assets/images/next.png" alt=""></span>
          </div>
        </div>
      </div>
      <!-- 地址弹窗 -->
      <van-popup v-model="showpopup" position="bottom">
        <div v-show="flag">
          <van-area :area-list="areaList"
                    :visible-item-count=5
                    @confirm="onAddrConfirm"
                    @cancel="cancel"
                    :value="addrCode"/>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import {Area, Popup} from 'vant';
import api from '../../api/api.js'

export default {
  data() {
    return {
      infoName: '',
      showpopup: false,
      marktext: true,
      marknext: false,
      flag: false,
      areaList: null,
      addrCode: '530103',
      address: '',
      province: {},
      city: {},
      county: {},
      districtId: null,
    }
  },
  created() {
    this.getarea()
    this.getinfo()
  },
  methods: {
    // 获取用户资料
    getinfo() {
      this.$get(api.info, {})
        .then((response) => {
          this.infoName = response.data.data.nickname
        })
        .catch((error) => {
          console.log(error)
        });
    },
    // 获取省市区
    getarea() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$jsonp(api.source.areaNumber, {
        callbackName: 'jsonpCallback'
      })
        .then((response) => {
          this.areaList = response
          this.$toast.clear();
        })
        .catch((error) => {
          this.$toast.clear();
          console.log(error)
        });
    },
    // 跳转区域对应小区
    tomyResidential() {
      const ResidentialCode = this.districtId
      const city = this.city
      this.$router.push({
        path: '/myResidential',
        query: {
          ResidentialCode,
          city
        }
      })
      window.location.reload();
    },
    // 点击确认，获取所选的省市区数据，确定选择,返回的必定是三元素数组
    onAddrConfirm(e) {
      this.province = e[0].name
      this.city = e[1].name
      this.district = e[2].name
      this.districtId = e[2].code
      this.address = this.province + this.city + this.district
      this.flag = false
      this.marktext = false
      this.marknext = true
      this.showpopup = false
    },
    // 取消
    cancel() {
      this.showpopup = false,
        this.flag = false
    },
    // 点击选择按钮，省市区弹窗
    again() {
      this.showpopup = true,
        this.flag = true
    }
  },
  components: {
    [Area.name]: Area,
    [Popup.name]: Popup
  }
}
</script>

<style scoped>
.myCity {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #2E294E; /* fallback for old browsers */
  background: #fff;
}

.city {
  width: 100%;
  height: 100%;
}

.city-img {
  width: 53.3%;
  height: 24.6%;
  margin: 0 auto 0;
  padding-top: 15%;
}

.city-img img {
  width: 100%;
  height: 100%;
}

.city-content {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.city-content span {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

.city-title {
  margin: .8rem .3rem .2rem .3rem;
  color: #000;
  font-weight: bold;
  font-size: .42rem;
  height: .6rem;
  line-height: .6rem;
}

.city-tips {
  color: #57c5c6;
  font-size: .28rem;
  height: .5rem;
  line-height: .5rem;
}

.city-text {
  margin-bottom: .5rem;
  color: #57c5c6;
  font-size: .28rem;
  height: .5rem;
  line-height: .5rem;
}

.city-button {
  margin: 0 auto;
  text-align: center;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  width: 70%;
  height: 1rem;
  line-height: 1rem;
  color: #fff;
  font-size: .28rem;
  border-radius: .48rem;
}

.next-box {
  margin: 0rem auto;
  height: auto;
  color: #000;
  font-weight: bold;
}

.next-box-content {
  display: block;
  /* width: 100%;
  height: 100%; */
  font-size: .32rem;
}

.city-content-img img {
  width: .5rem;
  height: .5rem;
  vertical-align: middle;
}
</style>
